<!DOCTYPE html>
<html lang="en">
<head>
    <title>AlloyTouch + three.js</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #fff;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script src="javascript/three.js"></script>

<script src="javascript/alloy_touch.js"></script>

<script>
    var camera, scene, renderer,light;
    var mesh;
    init();
    animate();
    function init() {
       renderer.setClearColorHex(0xFFFFFF, 1.0)
       // camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
      //  camera.position.z = 500;
        camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,1,1000);
        camera.position.x = 200;
        camera.position.y = 0;
        camera.position.z = 600;
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt({
          x : 0,
          y : -100,
          z : 0
        });

        scene = new THREE.Scene();
        var geometry = new THREE.CubeGeometry(200,150,80); //长方体的长宽高
        var material = new THREE.MeshLambertMaterial({ color:0xFF3366});
        mesh = new THREE.Mesh( geometry, material );
        mesh.position = new THREE.Vector3(0,0,0);
        scene.add( mesh );
         light = new THREE.DirectionalLight(0xFF0000,10);
        // 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样
        light.position.set(1,0,1);
        scene.add(light);
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        window.addEventListener( 'resize', onWindowResize, false );
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }

    var mouseX, mouseY, isMove = false;
    function render() {
      renderer.render(scene, camera);
    }
    function animation() {
      if (!isMove) {
        requestAnimationFrame(animation);
        mesh.rotation.y += Math.PI * 0.001;
        mesh.rotation.x += Math.PI * 0.001;
        render();
      }
    }
    document.onmousedown = function(e) {
      isMove = true;
      mouseX = e.pageX;
      mouseY = e.pageY;
    };
    document.onmousemove = function(e) {
      if (isMove) {
        var x = e.pageX;
        var y = e.pageY;
        var _x = x - mouseX;
        var _y = y - mouseY;
        mesh.rotation.x += _y * 0.005 * Math.PI;
        mesh.rotation.y += _x * 0.005 * Math.PI;
        render();
        mouseX = x;
        mouseY = y;
      }
    };
    document.onmouseup = function() {
      isMove = false;
      animation();
    }
    new AlloyTouch({
        touch: document,
        vertical: false,
        target: mesh.rotation,
        property: "y",
        factor: 0.08,
        moveFactor: 0.01,
        preventDefault: false,
        inertia: false
    })

      new AlloyTouch({
        touch: document,
        vertical: false,
        target: mesh.rotation,
        property: "x",
        factor: 0.08,
        moveFactor: 0.01,
        preventDefault: false,
        inertia: false
    })
</script>


</body>
</html>